<template>
  <view class="content">
    <u-sticky :h5NavHeight="0">
      <pageHeader @search="search"></pageHeader>
    </u-sticky>

    <pageList :items="list"> </pageList>

    <toolsMore :status="moreStatus"></toolsMore>
  </view>
</template>

<script>
import pageList from "./components/page-list.vue";
import pageHeader from "./components/page-header.vue";
import toolsMore from "@/components/tools/tools-more.vue";

export default {
  components: {
    pageList,
    toolsMore,
    pageHeader
  },

  data() {
    return {
      list: [],
      moreStatus: 1,
      page: 1,
      size: 15,
      isEnd: false,
      keyword: "",
      longitude: "",
      latitude: ""
    };
  },

  async mounted() {
    const res = await this.$store.dispatch("getLocation");
    if (res) {
      let { longitude, latitude } = res;
      this.longitude = longitude;
      this.latitude = latitude;
    }
    this.clearData();
  },

  methods: {
    search(e) {
      this.keyword = e;
      this.clearData();
    },
    clearData() {
      this.list = [];
      this.page = 1;
      this.isEnd = false;
      this.storeList();
    },

    async storeList() {
      let {
        page,
        size: limit,
        list: oldList,
        keyword,
        longitude,
        latitude
      } = this;
      this.moreStatus = 2;
      const res = await this.$allrequest.shop.storeList({
        page,
        limit,
        keyword,
        longitude,
        latitude
      });
      uni.stopPullDownRefresh();
      this.moreStatus = 1;
      if (res.code === 0) {
        let { list, row_count } = res.data,
          count = parseInt(row_count);

        if (list.length) {
          oldList.push(...list);
          this.page = this.page + 1;
        }

        if (oldList.length >= count) {
          this.isEnd = true;
          this.moreStatus = 3;
        }
      }
    }
  },

  onPullDownRefresh() {
    this.clearData();
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.storeList();
  }
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 150rpx;
}

.title {
  height: 66rpx;
  background: #fff;
}

.box {
  height: 200vh;
}

.tools-pof {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  padding: 10rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx);
  background: #fff;
}

.BatchProcessing {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .let {
    font-size: 32rpx;
    color: #262626;
  }
}

.pageList {
  padding: 0 12rpx;
  border-radius: 20rpx;
}

.checkbox .wx-checkbox-input,
.checkbox .uni-checkbox-input {
  border-radius: 100rpx;
}

::v-deep {
  .uni-checkbox-input {
    border-radius: 50%;
    transform: scale(0.7);
  }

  .uni-checkbox-input-checked {
    border-color: #f0250e !important;
    background: #f0250e;
    color: #fff !important;
  }

  // #ifdef  MP-WEIXIN
  checkbox .wx-checkbox-input {
    border-radius: 50% !important;
    color: #ffffff !important;
    transform: scale(0.7);
  }

  checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    color: #fff;
    background: #f0250e;
    border-color: #f0250e !important;
  }
  // #endif

  // #ifdef  MP-ALIPAY
  .checkbox {
    border: 0;
    margin-right: 20rpx;
  }

  .label {
    display: flex;
    align-items: center;
  }

  .checkbox::before {
    content: "";
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    border: 1px solid #ccc;
    border-radius: 50%;
  }

  checkbox-checked::before {
    width: 40rpx;
    height: 40rpx;
    background: #f0250e;
    border: none;
  }
  // #endif
}
</style>
